<!-- <script>
export default {
  name: 'App',
  data() {
    return {
      a: '',
      msgs: '🏀🐔🏀🐔🏀🐔🏀🐔🏀🐔🏀🐔🏀🐔🏀🐔',
      ikun: false
    }
  }
}
</script>

<template>
  <div class="box">
    <ul>
      <li>你好</li>
      <li>{{ a }}</li>
      <li><img src="@/assets/k.jpeg" v-show="ikun" /></li>
      <li>
        <button @click="a = msgs" @mouseover="ikun = true" @mouseleave="ikun = false">
          点击试试
        </button>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.box {
  width: 600px;
  height: 700px;
  background-color: darkcyan;
}
ul {
  list-style-type: none;
  color: orangered;
}
li {
  height: 200px;
  /* line-height: 200px; */
  text-align: center; /* 水平居中文本 */
}
img {
  width: 500px;
  height: 600px;
}
</style> -->



<!-- set-ExecutionPolicy RemoteSigned --> 

<template>
  <!-- 骨架 -->
  <div class="box" @mouseover="changeColor" :style="d">你好vue3 {{ version }}</div>
  <!-- @事件 click点击 -->
  <!-- 
    click单击
    dblclick 双击 
    mouseover 鼠标移入
    mouseout 鼠标移出
    mousemove 鼠标移动
    mouseenter 鼠标进入
    mouseleave 鼠标离开
    contextmenu 右键菜单
    keydown 按下键盘
    keyup 按键弹起
    input 输入框
    change 改变
    blur 失去焦点
    focus 获取焦点
  -->
  <button @dblclick="version = '2.0.0'">修改版本号</button>
  <h1>{{ number }}</h1>
  <button @click="number++">增加</button>
  <br />

  <!-- 加法计算器 -->
  <input type="number" placeholder="请输入一个数字" v-model="a" /> +
  <input type="number" placeholder="请输入一个数字" v-model="b" /> = {{ a + b }}

  <br />
  结果：{{ d }}

  <br />
  <input type="text" :value="c" placeholder="请输入内容" />
  <br />
  <input type="text" v-model="c" placeholder="请输入内容" />
  <br />
  邮箱：{{ c }}@qq.com

  <br />
  <!-- 条件渲染  if-->
  <!-- 控制显示或隐藏 -->
  <div v-if="number % 2 == 0">你好vue3</div>
  <div v-else-if="number == 6">我是6</div>
  <!-- 必须按着 -->
  <div v-else>else的情况</div>
  <br />
  <!-- 条件渲染  show-->
  <div v-if="number == 5">我是5</div>
  <div v-show="number == 5">我是5</div>

  <!-- 频繁切换用show，其他情况用if show的性能比if好 -->
  <div v-for="(item, index) in number">僵尸{{ index }}</div>
</template>

<script>
export default {
  name: 'App',
  // 模型
  data() {
    //用于存放当前组件里面的数据，都是当前组件私有的
    return {
      version: '1.0.0',
      mystyle: 'background-color: red',
      number: 0,
      a: 0,
      b: 0,
      c: ''
    }
  },
  //计算属性 也是模型
  //就是通过普通模型计算而来的值
  computed: {
    d() {
      return `left:${this.number}px`
    }
  },
  methods: {
    //存放当前组件里面要调用的方法
    changeColor() {
      this.mystyle = 'background-color: yellow'
    }
  }
}
</script>

<style scoped>
/* 样式 */
.box {
  width: 500px;
  height: 500px;
  background-color: paleturquoise;
  position: fixed;
  left: 0px;
  top: 600px;
}
</style>
